<template>
  <m-layout type="primary">
    <mt-header slot="header" title="授权功能" />
    <div slot="body" class="home">
      <m-flexbox class="top-info">
        <e-avatar class="avatar" :src="roleInfo.iconUrl"/>
        <m-flexbox-item>
          <h4 style="margin:0">{{roleInfo.authName}}<img class="train-icon" :src="roleInfo.authIconTxtUrl" alt=""></h4>
          <small class="weak">担任职务：{{roleInfo.roleName}}</small>
        </m-flexbox-item>
      </m-flexbox>
      <!--<router-link to="/demos">查看组件示例</router-link>-->
      <!--<br/>-->
      <!--<router-link to="/login">跳转登录页面</router-link>-->
      <m-flexbox class="role-box" :wrap="'wrap'">
        <router-link :to="item.serviceUrl" class="role-item" v-for="item in roleInfo.ipAuthServiceRespList" :key="item.id">
          <img :src="item.iconUrl" alt="" class="role-icon">
          <div>{{item.serviceName}}</div>
        </router-link>
      </m-flexbox>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState({
      roleInfo: state => state.roleInfo
    })
  },
  data () {
    return {
      value: ''
    }
  },
  mounted () {
    this.$store.dispatch('getIpOrgGrantRole')
  }
}
</script>

<style lang="scss">
  .home{
    .top-info{
      height: 1.7rem;
      .avatar{
        width: 0.9rem;
        height: 0.9rem;
        margin-left:0.24rem;
      }
      .train-icon{
        width: 0.97rem;
        height: 0.26rem;
        margin-left: 0.14rem;
        vertical-align: middle;
      }
    }
    .role-box{
      .role-item{
        width: 25%;
        text-align: center;
        padding: 0.32rem 0;
        img{
          width: 0.64rem;
        }
        div{
          color: $color-black-base;
          font-size: $font-size-small;
        }
      }
    }
  }
</style>
